<template><!--编辑问题-->
    <div style="height: 100%;">
        <navbar :title="$t('message_msg_title')" :backCallback="back">
            <template #right>
                <span class="font-size15 write-btn-right cur" @click="submit">{{ $t("btn_publish") }}</span><!--发布-->
            </template>
        </navbar>
        <div class="content-noBottom">
            <div class="layer-content-box">
                <div class="add-contents-box">
                    <p class="word-title-06">{{ $t("know_que_describe") }}</p><!--问题描述(必填)-->
                    <div class="white-bg bottom-shadow">
                        <textarea readonly v-model="queTitle" name="" :placeholder="$t('know_que_describe_tips')" style="height: 41px;color: #999999;"></textarea><!--输入详情的问题描述...-->
                    </div>
                    <p class="word-title-06">{{ $t("know_que_supply") }}</p><!--问题补充-->
                    <div class="white-bg">
                        <textarea v-validate="'tipsQueDetail'" name="tipsQueDetail" v-model="queContent" :placeholder="$t('know_que_supply_tips')"></textarea><!--输入问题补充说明...-->
                        <p class="font-size11 colorfd3 warning-red-tan warning" v-if="errors.has('tipsQueDetail')">{{ $t("exceeded_word_range_tips", {'value': '1000'}) }}</p><!--1000-->
                    </div>
                    <!--添加图片-->
                    <div class="border-top2 bottom-shadow white-bg module-box-18 clearfix">
                        <div style="float:left;" v-if="upImages.length == 0 && fileList.length == 0">
                            <div class="box-table" style="height: 65px;">
                                <div class="box-table-cell">
                                    <p class="color999 font-size14">{{ $t("lab_file_tips_7") }}</p><!--上传图片-->
                                    <p class="color999 font-size13">{{ $t("lab_file_tips_2") }}</p>
                                </div>
                            </div>
                        </div>
                        <div class="module-img-box" v-if="upImages.length != 0 || fileList.length != 0">
                            <div class="img-box-2" v-for="(item, index) in upImages" :key="index">
                                <img style="width: 100%;height: 100%;" :src="`${appUrl}/${item.fullPath.replace(/\\/g, '/')}`" alt=""/>
                                <em class="img-delete" @click="queDeleteFile(index, item.tmf.mtf_id, 'Img')"></em>
                            </div>
                            <div class="img-box-2" v-for="(item, index) in fileList" :key="index">
                                <img style="width: 100%;height: 100%;" :src="`${appUrl}${item.mtf_url}/${item.mtf_file_rename}`" alt=""/>
                                <em class="img-delete" @click="alreadyFileImg(index, item.mtf_id, 'Img')"></em>
                            </div>
                        </div>
                        <label for="upFile" class="add-icon-box-02" style="float: right; margin-right: -85px;">
                            <span class="add-icon-02"></span>
                            <input hidden id="upFile" type="file" @change="queUpFile">
                        </label>
                    </div>
                </div>
                <div class="margin-top10" v-if="queStion.know_detail">
                    <ul class="module-list-10">
                        <li class="clearfix">
                            <span class="font-size15">{{ $t("know_ask_que_classify") }}</span><!--问题分类-->
                            <span class="color999 word-title-08">
                                <em>
                                    {{queStion.know_detail.knowCatalog.kca_title}}
                                </em>
                            </span>
                        </li>
                        <li class="clearfix">
                            <span class="font-size15">{{ $t("know_ask_instructor") }}</span><!--邀请人回答-->
                            <span class="img-box-04" style="float: right;margin-right: 5px;">
                                <img v-if="index < 5" v-for="(item, index) in queStion.users" :key="index" :src="appUrl + item.usr_photo" alt=""/>
                                <span v-if="queStion.users && queStion.users.length > 5">...</span>
                            </span>
                        </li>
                        <li class="clearfix">
                            <span class="font-size15">{{ $t("know_bounty") }}</span><!--悬赏积分-->
                            <span class="color999" style="float: right;margin-right: 5px;">{{ queStion.know_detail.que_bounty }}{{ queStion.know_detail.que_bounty > 1 ? $t('credits_point_num_2') : $t('credits_point_num') }}</span><!--积分-->
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <van-dialog
        v-model="leaveHint"
        show-cancel-button
        :title="$t('confirm_exit_1')"
        :message="$t('confirm_exit_content_1')"
        :confirmButtonText="$t('sure')"
        :cancelButtonText="$t('cancel')"
        @confirm="$router.go(-1)"
        >
        </van-dialog>
    </div>
</template>

<script>
export default {
    name: 'ModifyQuestion',
    data() {
        return {
            know: {
                queTitle: '',
                queContent: ''
            },
            queStion: {},
            queTitle: '',
            queContent: '',
            upImages: [],
            fileList: [],
            chooseMsg: '',
            leaveHint: false,
            isAddImg: false,
            isDelImg: false,
            alreadyDeleteFiles: []
        };
    },
    methods: {
        submit() {
            this.$validator.validate().then(res => {
                if (res) {
                    this.$axios({
                        method: 'GET',
                        url: `/app/know/changeQueContent/${this.queStion.know_detail.que_id}`,
                        params: {
                            queContent: this.queContent
                        }
                    }).then(res => {
                        for (let i = 0; i < this.alreadyDeleteFiles.length; i++) {
                            let id = this.alreadyDeleteFiles[i].id;
                            let type = this.alreadyDeleteFiles[i].type;
                            this.deleteFile(id, type, (data, type) => {});
                        }
                        this.$router.go(-1);
                    });
                }
            });
        },
        queUpFile(event) {
            if (['jpg', 'gif', 'jpeg', 'png'].indexOf(event.target.files[0].type.split('/')[1]) === -1) {
                this.$toast(this.$t('lab_file_tips_6'));
                return;
            }
            this.upFile(event, 'Img', 'KnowQuestion', (data, type) => {
                this.upImages.push(data);
                this.isAddImg = true;
            });
        },
        queDeleteFile(index, id, type) {
            this.upImages.splice(index, 1);
            this.alreadyDeleteFiles.push({'index': index, 'id': id});
            this.isDelImg = true;
        },
        alreadyFileImg(index, id, type) {
            this.isDelImg = true;
            this.alreadyDeleteFiles.push({'index': index, 'id': id});
            this.fileList.splice(index, 1);
        },
        back() {
            if (this.know.queContent !== this.queContent || this.isAddImg || this.isDelImg) {
                this.leaveHint = true;
            } else {
                this.$router.go(-1);
            }
        }
    },
    mounted() {
        this.$axios({
            method: 'GET',
            url: `/app/know/knowDetail/json/UNSOLVED/${this.$route.params.id}`
        }).then(res => {
            this.queStion = res.data;
            this.fileList = [...res.data.know_detail.fileList, ...this.fileList];
            this.queTitle = res.data.know_detail.que_title;
            this.queContent = res.data.know_detail && res.data.know_detail.que_content ? JSON.parse(JSON.stringify(res.data.know_detail.que_content)) : '';
            this.know.queContent = this.queContent;
        });
        //清除服务端个人上传的游离文件
        this.$axios({
            method: 'DELETE',
            url: '/app/doing/clearInvalidModuleTemplate/',
            params: {
                module: 'KnowQuestion'
            }
        }).then(res => {});
    },
    created() {
        this.$Validator.extend('tipsQueDetail', {
            validate(value) {
                let num = 0;
                for (let i = 0; i < value.length; i++) {
                    if (value.charCodeAt(i) > 127 || value.charCodeAt(i) === 94) {
                        num += 2;
                    } else {
                        num += 1;
                    }
                }
                if (num > 2000) {
                    return false;
                } else {
                    return true;
                }
            }
        });
    }
};
</script>

<style scoped>
    .module-list-10 li {
        height: 60px;
        line-height: 60px;
        border-bottom: 1px solid #e6e6e6;
        background: #ffffff;
        padding: 0 15px;
        color: #999999;
    }
    .module-list-10 li:nth-last-child(1) {
        border-bottom: none;
    }
    .arrow-right {
        margin: 25px 0 0 0;
    }
    .mask-layer {
        z-index: 200;
    }
    .word-title-08 {
        float: right;
        margin-right: 5px;
        max-width: 130px;
        overflow: hidden;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .box-16 {
        margin: 17px 0 14px;
    }
    .box-16 div {
        height: 42px;
        line-height: 44px;
        padding: 0 15px;
        border: 1px solid #cccccc;
        border-radius: 2px;
        box-sizing: border-box;
        font-size: 14px;
    }
    .box-16 div input {
        float: right;
        width: 100px;
        height: 42px;
        line-height: 42px;
        background: none;
        border: none;
        font-size: 14px;
        text-align: right;
        padding: 0 8px;
    }
    .tips {
        display: inline-block;
        width: 100%;
        min-height: 26px;
        text-align: right;
        line-height: 26px;
    }
    .selected-user{
        width: 100%;
        height: 100%;
        position: fixed;
        top: 0;
        background: #ffffff;
        z-index: 999;
    }
</style>
